$scrollable-height: 296px;

.exampleX {

  ng-scrollbar {
    --scrollbar-hover-size: 12px;
  }

  .toggle-pointer-events-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  .mat-button-toggle-group.toggle-pointer-events {
    height: 26px;
    font-size: 12px;

    ::ng-deep {
      .mat-button-toggle {
        background-color: var(--color-examplex-primary);

        &.mat-button-toggle-checked {
          background-color: var(--color-accent);
        }
      }

      .mat-button-toggle, .mat-button-toggle-button, .mat-button-toggle-label-content {
        height: 100%;
      }

      .mat-button-toggle-label-content {
        line-height: 26px;
        font-size: 12px;
        padding: 0;
      }
    }
  }

  .right-controls {
    position: relative;
    margin-right: -1em;
  }

  @media only screen and (max-width: 600px) {
    .right-controls, app-resize-form {
      display: none;
    }
  }

  ::ng-deep {
    .mat-button-toggle-group {

      .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
        width: 100px;
      }
    }

    .highlight-layout {
      border: 2px groove var(--color-accent);

      .scrollbar-control {
        border: 1px dashed lightgray;
      }

      .ng-scroll-viewport-wrapper {
        border: 2px solid var(--color-warn);

        &:before {
          content: 'viewport';
          background-color: var(--color-warn);
          color: white;
          position: sticky;
          top: 0;
          padding: 2px 6px;
          border-radius: 0 0 5px 5px;
          display: inline-block;
          transform: translateX(-50%);
          margin-left: 50%;
          z-index: 9999;
        }
      }
    }

    &[dir='rtl'] {
      .ng-scroll-viewport-wrapper:before {
        transform: translateX(50%);
        margin-right: 50%;
        margin-left: auto;
      }
    }

    .inner > *::selection {
      background-color: mediumpurple;
    }
  }

  .scrollbar-wrapper {
    position: relative;
    flex: 1;
    height: $scrollable-height;
    max-height: $scrollable-height;
  }

  .inner {
    color: lightgreen;
    width: 140%;
  }

  b {
    margin-right: 1em;
    display: inline-block;
  }
}

.mat-mdc-card {
  color: white;
  font-weight: 300;
}

.mat-mdc-card-title {
  width: 100%;
  display: flex;
  align-items: center;
}

.mat-mdc-card-content {
  margin: 0;
  padding: 0 16px;
  display: flex;
  font-size: 14px;
}

.mat-expansion-panel {
  background-color: var(--color-examplex-primary);
}

.mat-accordion {
  display: block;
  width: 100%;
  margin: 6px;
}

#target {
  border: 2px solid var(--color-warn);
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  width: 100px;
}
